<template>
  <div>
    <el-container style="height: 600px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: white">
        <el-menu :default-openeds="['1']">

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-postcard"></i>信息修改</template>
            <el-menu-item-group>

              <router-link class="alink" to="/showinfo">
                <el-menu-item index="1-1">
                  基本信息
                </el-menu-item>

              </router-link>

              <router-link class="alink" to="/infoeditor">
                <el-menu-item index="1-2">
                  信息修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/imageUp">
                <el-menu-item index="1-3">
                  头像修改
                </el-menu-item>
              </router-link>

              <router-link class="alink" to="/countcontrol">
                <el-menu-item index="1-4">
                  账号管理
                </el-menu-item>
              </router-link>


            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-postcard"></i>文章管理</template>
            <el-menu-item-group>
              <router-link class="alink" to="/articlecontrol">
                <el-menu-item index="2-1">
                  文章管理
                </el-menu-item>
              </router-link>

            </el-menu-item-group>

          </el-submenu>


          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-edit"></i>文章书写
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/writearticle">
                <el-menu-item index="3-1">
                  文章书写
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-user"></i>关注的人
            </template>
            <el-menu-item-group>
              <router-link class="alink" to="/checkFollow">
                <el-menu-item index="3-1">
                  关注的人
                </el-menu-item>
              </router-link>
            </el-menu-item-group>

          </el-submenu>

        </el-menu>
      </el-aside>


      <el-container>
        <el-main>
          <div style="width: 80%;margin: 0 auto">
            <div style="width: 70%;margin-top: 5%">
              <el-form :model="ruleForm"
                       :rules="rules"
                       ref="ruleForm"
                       label-width="100px"
                       class="demo-dynamic"
              >
                <el-form-item
                    style="width: 49%"
                    label="昵称修改"
                    prop="name"
                    :rules="[
          { required: true, message: '请注意昵称长度在3~15个字符', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ]"
                >
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item
                    style="width: 49%"
                    label="城市"
                    prop="city"
                    :rules="[
          { required: false, message: '请注意长度在3~20个字符', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]"

                >
                  <el-input v-model="ruleForm.city"></el-input>
                </el-form-item>

                <el-form-item
                    style="width: 60%"
                    prop="email"
                    label="邮箱"
                    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
                >
                  <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item
                    style="width: 80%;height: 120px"
                    label="个性签名"
                    prop="motto"
                    :rules="[
          { required: false, message: '请输入座右铭', trigger: 'blur' },
          { min: 0, max: 150, message: '请注意长度不能超过150个字符', trigger: 'blur' }
        ]"

                >
                  <el-input type="textarea" style="height: 100px;resize: none" v-model="ruleForm.motto"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交修改</el-button>

                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-main>
      </el-container>

    </el-container>

  </div>

</template>

<script>
import user from "@/store/user";

export default {
  data() {
    return {
      ruleForm: {
        name: '',
        sex: '',
        email: '',
        city: '',
        motto: '',
      },

    };
  },
  created() {
    this.showInfo()
  },
  methods: {
    showInfo:function (){

      const userInfo = user.getters.getUser(user.state());
      var userId;
      if(userInfo===null)
        this.$message.warning("请先登录")
      else userId=userInfo.user.userID;
      this.$axios({
        method: 'post',
        url: '/user/current',
        data: ({
          userID:userId,
        })
      })
          .then(res => {
            if (res.data.data) {
              this.ruleForm.name=res.data.data.username
              this.ruleForm.email=res.data.data.email
              this.ruleForm.motto=res.data.data.motto
              this.ruleForm.city=res.data.data.city
              if(res.data.data.sex===2){
                  this.ruleForm.sex='男'
              }
              else
                this.ruleForm.sex='女'
            }
            else{
              this.$message.info("获取个人信息失败")
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })

    },
    submitForm() {
      const userInfo = user.getters.getUser(user.state());
      var userId;
      if(userInfo===null)
        this.$message.warning("请先登录")
      else userId=userInfo.user.userID;
      var gender;
      if(this.ruleForm.sex==='男')
        gender=2;
      else
        gender=1;
      this.$axios({
        method: 'post',
        url: '/user/modify',

        data: ({
          userID:userId,
          userName:this.ruleForm.name,
          gender:gender,
          city:this.ruleForm.city,
          email:this.ruleForm.email,
          motto:this.ruleForm.motto,
        })
      })
          .then(res => {
            if (res.data.data) {
              this.$message.success("修改成功");
              this.reload();
            }
            else{
              this.$message.warning("修改失败");
            }
          })
          .catch(err => {
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },

  }

}
</script>

<style scoped>

</style>
